<template>
  <div style="height: 400px;">
    <el-row style="padding-bottom: 10px;height: 10%">
      <span>业务对象: <span style="color: red">{{ formData.selFeatureName }}</span></span>
    </el-row>
    <el-row style="height: 90%">
      <el-col :span="10" style="height: 100%">
        <div style="height: 100%;border: 1px solid #EBEEF5;box-sizing: border-box;overflow-y: auto">
          <div style="padding: 8px;border-bottom: 1px solid #EBEEF5">
            <el-radio-group v-model="checkKind">
              <el-radio label="busiAttr" name="busiAttr">业务属性</el-radio>
              <el-radio label="feature" name="feature">业务特征</el-radio>
            </el-radio-group>
          </div>
          <el-tree :data="typeData" node-key="id" show-checkbox check-on-click-node ref="provideTree"
            style="padding-top: 5px">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="4" style="height: 100%;">
        <div style="height: 100%;display: flex;justify-content: center;align-items: center">
          <el-button size="mini" type="primary" @click="leftMoveHandler">
            << </el-button>
              <el-button size="mini" type="primary" @click="rightMoveHanler"> >> </el-button>
        </div>
      </el-col>
      <el-col :span="10" style="height: 100%">
        <div style="height: 100%;border: 1px solid #EBEEF5;box-sizing: border-box;overflow-y: auto">
          <el-tree ref="chooseTree" :data="checkNodes" check-on-click-node node-key="id" show-checkbox
            style="padding-top: 5px">
          </el-tree>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { $BusinessAttrApi } from "@/network/feature/BusinessAttrApi";

export default {
  name: "BatchAddForm",
  props: {
    formData: {
      selFeatureName: "",
      selFeatureId: "",
    }
  },
  data() {
    return {
      checkKind: 'busiAttr',
      typeData: [],
      checkNodes: [],
    }
  },
  methods: {
    async loadBusiAttrTreeData() {
      const res = await $BusinessAttrApi.listTree({ featureId: this.formData.selFeatureId })
      if (this.$ResHandler.isOk(res)) {
        this.typeData = res.data;
      }
    },

    // 左移按钮
    leftMoveHandler() {
      let tmp = this.$refs.chooseTree.getCheckedNodes();
      if (tmp.length === 0) {
        return;
      }
      let names = tmp.map(cn => cn.name);
      for (let i = this.checkNodes.length - 1; i >= 0; i--) {
        let item = this.checkNodes[i];
        if (names.indexOf(item.name) > -1) {
          this.checkNodes.splice(i, 1);
        }
      }
    },

    // 右移按钮
    rightMoveHanler() {
      let allNodes = this.$refs.provideTree.getCheckedNodes();
      let nodes = allNodes.filter(n => n.type === 'busiAttr');
      nodes.forEach(node => {
        this.checkNodes.push(node);
      });
      this.$nextTick(() => {
        this.checkAllNodes(nodes);
      });
    },

    // 默认全选右侧
    checkAllNodes(nodes) {
      let ids = nodes.map(item => item.id);
      this.$refs.chooseTree.setCheckedKeys(ids, false);
    },

    takeFormData() {
      return {
        kind: this.checkKind,
        fieldList: [...this.checkNodes]
      };
    },


  },

  mounted() {
    this.loadBusiAttrTreeData();
  },

  computed: {
    // defaultCheckedKeys() {
    //   return this.checkNodes.map(item => item.id);
    // }
  }

}
</script>

<style scoped></style>